<template>
  <n-space>
    <!-- 新增 -->
    <n-button type="info" size="small" ghost @click="$emit('create')">
      <template #icon><n-icon :component="AddOutline" /></template>
      {{ $t('common.create') }}
    </n-button>
    <!-- 导出 -->
    <n-button type="warning" size="small" ghost @click="$emit('export')">
      <template #icon><n-icon :component="CloudDownloadOutline" /></template>
      {{ $t('common.export') }}
    </n-button>
    <!-- 批量删除 -->
    <n-button type="error" size="small" ghost @click="$emit('delete-batch')">
      <template #icon><n-icon :component="TrashOutline" /></template>
      {{ $t('common.batch_delete') }}
    </n-button>
    <!-- 刷新 -->
    <n-button size="small" ghost :loading="loading" @click="$emit('refresh')">
      <template #icon><n-icon :component="ReloadOutline" /></template>
      {{ $t('common.refresh') }}
    </n-button>
    <!-- 列表项 -->
    <n-popover placement="bottom" trigger="click">
      <template #trigger>
        <n-button size="small" ghost @click="$emit('toggle-columns')">
          <template #icon><n-icon :component="CogOutline" /></template>
          {{ $t('common.list_item') }}
        </n-button>
      </template>
      <slot name="columns"></slot>
    </n-popover>
  </n-space>
</template>

<script setup lang="ts">
import { AddOutline, CloudDownloadOutline, CogOutline, ReloadOutline, TrashOutline } from '@vicons/ionicons5'

defineProps<{
  loading: boolean
}>()

defineEmits<{
  (e: 'create'): void
  (e: 'export'): void
  (e: 'delete-batch'): void
  (e: 'refresh'): void
  (e: 'toggle-columns'): void
}>()
</script>
